<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Internet Dreams</title>
<link rel="stylesheet" href="CSS/screen.css" type="text/css"
	media="screen" title="default" />
<link rel="stylesheet" href="CSS/displaytag.css" type="text/css"
	media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
<![endif]-->

<!--  jquery core -->
<script src="Js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

<!--  checkbox styling script -->
<script src="Js/jquery/ui.core.js" type="text/javascript"></script>
<script src="Js/jquery/ui.checkbox.js" type="text/javascript"></script>
<script src="Js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('input').checkBox();
		$('#toggle-all').click(function() {
			$('#toggle-all').toggleClass('toggle-checked');
			$('#mainform input[type=checkbox]').checkBox('toggle');
			return false;
		});
	});
</script>

<![if !IE 7]>

<!--  styled select box script version 1 -->
<script src="Js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect').selectbox({
			inputClass : "selectbox_styled"
		});
	});
</script>


<![endif]>

<!--  styled select box script version 2 -->
<script src="Js/jquery/jquery.selectbox-0.5_style_2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_form_1').selectbox({
			inputClass : "styledselect_form_1"
		});
		$('.styledselect_form_2').selectbox({
			inputClass : "styledselect_form_2"
		});
	});
</script>

<!--  styled select box script version 3 -->
<script src="Js/jquery/jquery.selectbox-0.5_style_2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_pages').selectbox({
			inputClass : "styledselect_pages"
		});
	});
</script>

<!--  styled file upload script -->
<script src="Js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {
		$("input.file_1").filestyle({
			image : "images/forms/choose-file.gif",
			imageheight : 21,
			imagewidth : 78,
			width : 310
		});
	});
</script>

<!-- Custom jquery scripts -->
<script src="Js/jquery/custom_jquery.js" type="text/javascript"></script>

<!-- Tooltips -->
<script src="Js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="Js/jquery/jquery.dimensions.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('a.info-tooltip ').tooltip({
			track : true,
			delay : 0,
			fixPNG : true,
			showURL : false,
			showBody : " - ",
			top : -35,
			left : 5
		});
	});
</script>


<!--  date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="Js/jquery/date.js" type="text/javascript"></script>
<script src="Js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {

		// initialise the "Select date" link
		$('#date-pick').datePicker(
		// associate the link with a date picker
		{
			createButton : false,
			startDate : '01/01/2005',
			endDate : '31/12/2020'
		}).bind(
		// when the link is clicked display the date picker
		'click', function() {
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}).bind(
		// when a date is selected update the SELECTs
		'dateSelected', function(e, selectedDate, $td, state) {
			updateSelects(selectedDate);
		}).bind('dpClosed', function(e, selected) {
			updateSelects(selected[0]);
		});

		var updateSelects = function(selectedDate) {
			var selectedDate = new Date(selectedDate);
			$('#d option[value=' + selectedDate.getDate() + ']').attr(
					'selected', 'selected');
			$('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr(
					'selected', 'selected');
			$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr(
					'selected', 'selected');
		}
		// listen for when the selects are changed and update the picker
		$('#d, #m, #y').bind('change', function() {
			var d = new Date($('#y').val(), $('#m').val() - 1, $('#d').val());
			$('#date-pick').dpSetSelected(d.asString());
		});

		// default the position of the selects to today
		var today = new Date();
		updateSelects(today.getTime());

		// and update the datePicker to reflect it...
		$('#d').trigger('change');
	});
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="Js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).pngFix();
	});
</script>
</head>
<body>

	<!-- Start: page-top-outer -->
	<div id="page-top-outer">

		<!-- Start: page-top -->
		<div id="page-top">

			<!-- start logo -->
			<div id="logo">
				<a href=""><img src="images/shared/logo.png" width="156"
					height="40" alt="" /></a>
			</div>
			<!-- end logo -->

			<!--  start top-search -->
			<div id="top-search">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td><input type="text" value="Search"
							onblur="if (this.value=='') { this.value='Search'; }"
							onfocus="if (this.value=='Search') { this.value=''; }"
							class="top-search-inp" /></td>
						<td><select class="styledselect">
								<option value="">All</option>
								<option value="">Products</option>
								<option value="">Categories</option>
								<option value="">Clients</option>
								<option value="">News</option>
						</select></td>
						<td><input type="image"
							src="images/shared/top_search_btn.gif" /></td>
					</tr>
				</table>
			</div>
			<!--  end top-search -->
			<div class="clear"></div>

		</div>
		<!-- End: page-top -->

	</div>
	<!-- End: page-top-outer -->

	<div class="clear">&nbsp;</div>

	<!--  start nav-outer-repeat................................................................................................. START -->
	<div class="nav-outer-repeat">
		<!--  start nav-outer -->
		<div class="nav-outer">

			<!-- start nav-right -->
			<div id="nav-right">

				<div class="nav-divider">&nbsp;</div>
				<div class="showhide-account">
					<img src="images/shared/nav/nav_myaccount.gif" width="93"
						height="14" alt="" />
				</div>
				<div class="nav-divider">&nbsp;</div>
				<a href="" id="logout"><img
					src="images/shared/nav/nav_logout.gif" width="64" height="14"
					alt="" /></a>
				<div class="clear">&nbsp;</div>

				<!--  start account-content -->
				<div class="account-content">
					<div class="account-drop-inner">
						<a href="" id="acc-settings">Settings</a>
						<div class="clear">&nbsp;</div>
						<div class="acc-line">&nbsp;</div>
						<a href="" id="acc-details">Personal details </a>
						<div class="clear">&nbsp;</div>
						<div class="acc-line">&nbsp;</div>
						<a href="" id="acc-project">Project details</a>
						<div class="clear">&nbsp;</div>
						<div class="acc-line">&nbsp;</div>
						<a href="" id="acc-inbox">Inbox</a>
						<div class="clear">&nbsp;</div>
						<div class="acc-line">&nbsp;</div>
						<a href="" id="acc-stats">Statistics</a>
					</div>
				</div>
				<!--  end account-content -->

			</div>
			<!-- end nav-right -->


			<!--  start nav -->
			<div class="nav">
				<div class="table">

					<ul class="select">
						<li><a href="#nogo"><b>Dashboard</b>
							<!--[if IE 7]><!--></a>
						<!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
							<div class="select_sub">
								<ul class="sub">
									<li><a href="#nogo">Dashboard Details 1</a></li>
									<li><a href="#nogo">Dashboard Details 2</a></li>
									<li><a href="#nogo">Dashboard Details 3</a></li>
								</ul>
							</div> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>

					<div class="nav-divider">&nbsp;</div>

					<ul class="current">
						<li><a href="#nogo"><b>Products</b>
							<!--[if IE 7]><!--></a>
						<!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
							<div class="select_sub show">
								<ul class="sub">
									<li><a href="#nogo">View all products</a></li>
									<li class="sub_show"><a href="#nogo">Add product</a></li>
									<li><a href="#nogo">Delete products</a></li>
								</ul>
							</div> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>

					<div class="nav-divider">&nbsp;</div>

					<ul class="select">
						<li><a href="#nogo"><b>Categories</b>
							<!--[if IE 7]><!--></a>
						<!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
							<div class="select_sub">
								<ul class="sub">
									<li><a href="#nogo">Categories Details 1</a></li>
									<li><a href="#nogo">Categories Details 2</a></li>
									<li><a href="#nogo">Categories Details 3</a></li>
								</ul>
							</div> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>

					<div class="nav-divider">&nbsp;</div>

					<ul class="select">
						<li><a href="#nogo"><b>Clients</b>
							<!--[if IE 7]><!--></a>
						<!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
							<div class="select_sub">
								<ul class="sub">
									<li><a href="#nogo">Clients Details 1</a></li>
									<li><a href="#nogo">Clients Details 2</a></li>
									<li><a href="#nogo">Clients Details 3</a></li>

								</ul>
							</div> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>

					<div class="nav-divider">&nbsp;</div>

					<ul class="select">
						<li><a href="#nogo"><b>News</b>
							<!--[if IE 7]><!--></a>
						<!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
							<div class="select_sub">
								<ul class="sub">
									<li><a href="#nogo">News details 1</a></li>
									<li><a href="#nogo">News details 2</a></li>
									<li><a href="#nogo">News details 3</a></li>
								</ul>
							</div> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
					</ul>

					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<!--  start nav -->

		</div>
		<div class="clear"></div>
		<!--  start nav-outer -->
	</div>
	<!--  start nav-outer-repeat................................................... END -->

	<div class="clear"></div>

	<!-- start content-outer ........................................................................................................................START -->
	<div id="content-outer">
		<!-- start content -->
		<div id="content">

			<!--  start page-heading -->
			<div id="page-heading">
				<h1>Add product</h1>
			</div>
			<!-- end page-heading -->

			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowleft.jpg" width="20" height="300"
						alt="" /></th>
					<th class="topleft"></th>
					<td id="tbl-border-top">&nbsp;</td>
					<th class="topright"></th>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowright.jpg" width="20" height="300"
						alt="" /></th>
				</tr>
				<tr>
					<td id="tbl-border-left"></td>
					<td>
						<!--  start content-table-inner ...................................................................... START -->
						<div id="content-table-inner">

							<!--  start table-content  -->
							<div id="table-content">

								<!--  start message-yellow -->
								<div id="message-yellow">
									<table border="0" width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td class="yellow-left">You have a new message. <a
												href="">Go to Inbox.</a></td>
											<td class="yellow-right"><a class="close-yellow"><img
													src="images/table/icon_close_yellow.gif" alt="" /></a></td>
										</tr>
									</table>
								</div>
								<!--  end message-yellow -->

								<!--  start message-red -->
								<div id="message-red">
									<table border="0" width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td class="red-left">Error. <a href="">Please try
													again.</a></td>
											<td class="red-right"><a class="close-red"><img
													src="images/table/icon_close_red.gif" alt="" /></a></td>
										</tr>
									</table>
								</div>
								<!--  end message-red -->

								<!--  start message-blue -->
								<div id="message-blue">
									<table border="0" width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td class="blue-left">Welcome back. <a href="">View
													my account.</a>
											</td>
											<td class="blue-right"><a class="close-blue"><img
													src="images/table/icon_close_blue.gif" alt="" /></a></td>
										</tr>
									</table>
								</div>
								<!--  end message-blue -->

								<!--  start message-green -->
								<div id="message-green">
									<table border="0" width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td class="green-left">Product added sucessfully. <a
												href="">Add new one.</a></td>
											<td class="green-right"><a class="close-green"><img
													src="images/table/icon_close_green.gif" alt="" /></a></td>
										</tr>
									</table>
								</div>
								<!--  end message-green -->


								<!--  start product-table ..................................................................................... -->
								<form id="mainform" action="">
									<display:table uid="materiaPrima" name="materiasPrimasList"
										defaultsort="1" defaultorder="ascending" pagesize="10"
										class="maxwidth" id="product-table">
										
										
										
										
										
										<display:column  
											title="<a id='toggle-all'>" maxLength="25"
											value="<input type='checkbox'/>" headerClass="table-header-check" />
											
											
											
										<display:column property="codigoMateriaPrima" sortable="true"
											title="ID MateriaPrima" maxLength="25"
											headerClass="table-header-repeat line-left minwidth-1" />
										<display:column property="descripcion" sortable="false"
											title="Descripcion" maxLength="25"
											headerClass="table-header-repeat line-left hacktd" />
										<display:column property="color" sortable="true" title="Color"
											maxLength="25"
											headerClass="table-header-repeat line-left minwidth-1" />
										<display:column property="kilos" sortable="true" title="Kilos"
											maxLength="25"
											headerClass="table-header-repeat line-left minwidth-1" />
										<display:column title="Options" sortable="false"
											headerClass="table-header-repeat line-left hacktd">
											<a href="" title="Edit" class="icon-1 info-tooltip"></a>
											<a href="" title="Edit" class="icon-2 info-tooltip"></a>
											<a href="" title="Edit" class="icon-3 info-tooltip"></a>
											<a href="" title="Edit" class="icon-4 info-tooltip"></a>
											<a href="" title="Edit" class="icon-5 info-tooltip"></a>
										</display:column>

										<display:setProperty name="paging.banner.group_size"
											value="10" />
										<display:setProperty name="paging.banner.item_name"
											value="materiaPrima" />
									</display:table>
									<table border="0" width="100%" cellpadding="0" cellspacing="0"
										id="product-table">
										<tr>
											<th class="table-header-check"><a id="toggle-all"></a>
											</th>
											<th class="table-header-repeat line-left minwidth-1"><a
												href="">Last Name</a></th>
											<th class="table-header-repeat line-left minwidth-1">First
												Name</th>
											<th class="table-header-repeat line-left"><a href="">Email</a></th>
											<th class="table-header-repeat line-left"><a href="">Due</a></th>
											<th class="table-header-repeat line-left"><a href="">Website</a></th>
											<th class="table-header-options line-left"><a href="">Options</a></th>
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
										<tr class="alternate-row">
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
										<tr class="alternate-row">
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
										<tr>
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
										<tr class="alternate-row">
											<td><input type="checkbox" /></td>
											<td>Sabev</td>
											<td>George</td>
											<td><a href="">george@mainevent.co.za</a></td>
											<td>R250</td>
											<td><a href="">www.mainevent.co.za</a></td>
											<td class="options-width"><a href="" title="Edit"
												class="icon-1 info-tooltip"></a> <a href="" title="Edit"
												class="icon-2 info-tooltip"></a> <a href="" title="Edit"
												class="icon-3 info-tooltip"></a> <a href="" title="Edit"
												class="icon-4 info-tooltip"></a> <a href="" title="Edit"
												class="icon-5 info-tooltip"></a></td>
										</tr>
									</table>
									<!--  end product-table................................... -->
								</form>
							</div>
							<!--  end content-table  -->

							<!--  start actions-box ............................................... -->
							<div id="actions-box">
								<a href="" class="action-slider"></a>
								<div id="actions-box-slider">
									<a href="" class="action-edit">Edit</a> <a href=""
										class="action-delete">Delete</a>
								</div>
								<div class="clear"></div>
							</div>
							<!-- end actions-box........... -->

							<!--  start paging..................................................... -->
							<table border="0" cellpadding="0" cellspacing="0"
								id="paging-table">
								<tr>
									<td><a href="" class="page-far-left"></a> <a href=""
										class="page-left"></a>
										<div id="page-info">
											Page <strong>1</strong> / 15
										</div> <a href="" class="page-right"></a> <a href=""
										class="page-far-right"></a></td>
									<td><select class="styledselect_pages">
											<option value="">Number of rows</option>
											<option value="">1</option>
											<option value="">2</option>
											<option value="">3</option>
									</select></td>
								</tr>
							</table>
							<!--  end paging................ -->

							<div class="clear"></div>

						</div> <!--  end content-table-inner ............................................END  -->
					</td>
					<td id="tbl-border-right"></td>
				</tr>
				<tr>
					<th class="sized bottomleft"></th>
					<td id="tbl-border-bottom">&nbsp;</td>
					<th class="sized bottomright"></th>
				</tr>
			</table>
			<div class="clear">&nbsp;</div>

		</div>
		<!--  end content -->
		<div class="clear">&nbsp;</div>
	</div>
	<!--  end content-outer........................................................END -->

























	<div class="clear">&nbsp;</div>

	<!-- start footer -->
	<div id="footer">
		<!--  start footer-left -->
		<div id="footer-left">

			Admin Skin &copy; Copyright Internet Dreams Ltd. <span id="spanYear"></span>
			<a href="">www.netdreams.co.uk</a>. All rights reserved.
		</div>
		<!--  end footer-left -->
		<div class="clear">&nbsp;</div>
	</div>
	<!-- end footer -->















</body>
</html>
